<template>
<!--message_notice.wxml-->
<view class="container">
    <view class="notice-pg">
        <view v-for="(item, index) in messageList" :key="index" class="notice-list">
            <navigator class="notice-item" :url="item.url">
                <view class="notice-title">
                    <image v-if="item.type==2" class="notice-icon" src="/static/images/mesg-logistics.png"></image>
                    <image v-if="item.type==0" class="notice-icon" src="/static/images/mesg-notes.png"></image>
                    <image v-if="item.type==1" class="notice-icon" src="/static/images/mesg-activi.png"></image>
                    <text :hidden="item.no_read <= 0" class="notice-icon-num">{{item.no_read > 9 ? '9+' : item.no_read}}</text>
                </view>
                <view class="notice-cont-wrap">
                    <view class="notice-cont-top">
                        <text v-if="item.type==0" class="notice-cont-dev">通知</text>
                        <text v-if="item.type==1" class="notice-cont-dev">活动</text>
                        <text v-if="item.type==2" class="notice-cont-dev">物流</text>
                        <text class="notice-cont-time">{{item.send_time_text ? item.send_time_text : ''}}</text>
                    </view>
                    <view class="notice-cont-bottom">
                        <text class="notice-cont-name">{{item.message_content}}</text>
                    </view>
                </view>
            </navigator>
        </view>
        <view class="height-20"></view>
        <!-- <view class="notice-list">
            <navigator  class="notice-item" url='' wx:key="{{index}}">
                <view class="notice-title">
                    <image class="notice-icon" src='../../../images/mesg-logo.png'>
                    </image>
                    <text class='notice-icon-num' hidden='{{noticeconts.no_read.message_private_no_read}}==0' >{{noticeconts.no_read.message_private_no_read}}</text>
                </view> 
                <view class='notice-cont-wrap'>
                    <view class='notice-cont-top'>
                        <text class='notice-cont-dev'>店铺昵称</text>
                        <text class='notice-cont-time'>15：25</text>
                    </view>
                    <view class="notice-cont-bottom">
                        <text class='notice-cont-name'>此处显示最新物流信息。您在{{store_name}}购买的宝贝已...</text>
                    </view>
                </view>
            </navigator>  
        </view> -->
    </view>   
</view>
</template>

<script>
// message_notice.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      messageList: null,
      store_name: setting.appName
    };
  },

  components: {},
  props: {},
  onShow: function (options) {
    this.getMessageList();
  },
  methods: {
    getMessageList: function () {
      var that = this;
      request.get('/index.php?m=Api&c=Message&a=message_notice', {
        success: function (res) {
          res.data.result.forEach(function (val, index, arr) {
            if (val.type == 0) {
              val.url = "/pages/user/message_release/message_release";
            } else if (val.type == 1) {
              val.url = "/pages/user/active_mesg/active_mesg";
            } else if (val.type == 2) {
              val.url = "/pages/user/message_logistics/message_logistics";
            }
          });
          that.setData({
            messageList: res.data.result
          });
        }
      });
    }
  }
};
</script>
<style>
/* message_notice.wxss */
.notice-pg{
  display: block;
  width: 100%;
  min-height: 1210rpx;
  background-color:#f5f5f5;
}
.notice-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0 20rpx;
    height:130rpx;
    background-color: #fff;
    width: 710rpx;
    box-sizing: border-box;
    margin: 0rpx auto;
    margin-top: 20rpx;
    border-radius: 10rpx;
}
.notice-title{
    display: flex;
    width: 82rpx;
    height: 82rpx;
    position: relative;
}
.notice-icon{
    width: 82rpx;
    height: 82rpx;
}
.notice-icon-num{
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  border-radius: 50rpx;
  position: absolute;
  right: -10rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  top: -10rpx;
  background-color:#ff6a00;
}
.notice-cont-wrap{
  width: 545rpx;
  height: 82rpx;
  margin-left: 25rpx;
}
.notice-cont-top{
  overflow: hidden;
}
.notice-cont-dev{
  font-size: 28rpx;
  text-align: left;
  width: 50%;
  font-weight: 600;
  color: #333;
  float: left;
}
.notice-cont-time{
  width: 50%;
  color: #999999;
  font-size: 22rpx;
  line-height: 28rpx;
  text-align: right;
  float: right;
}
.notice-cont-name{
  display: block;
  width: 575rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #999;
}
.notice-cont-bottom{
  color: #999999;
  text-align: left;
  font-size: 24rpx;
  margin-top: 15rpx;
}
.height-20{
  height: 20rpx;
  background-color:#f5f5f5;
}
</style>